<template>
  <div class="organization-container">
    <el-card>
      <div class="header">
        <h2>组织架构管理</h2>
        <div class="actions">
          <el-button type="primary" icon="el-icon-plus" @click="showAddDepartmentDialog">添加部门</el-button>
          <el-button icon="el-icon-refresh" @click="loadOrganization">刷新</el-button>
        </div>
      </div>
    </el-card>

    <el-row :gutter="20" class="org-content">
      <el-col :span="8">
        <el-card class="tree-card">
          <div class="tree-header">
            <el-input
                v-model="filterText"
                placeholder="输入部门名称筛选"
                prefix-icon="el-icon-search"
                clearable
            />
          </div>
          <el-tree
              ref="orgTree"
              class="filter-tree"
              :data="orgTreeData"
              :props="defaultProps"
              :filter-node-method="filterNode"
              node-key="id"
              default-expand-all
              highlight-current
              @node-click="handleNodeClick"
          >
            <template #default="{ node, data }">
              <span class="custom-node">
                <i :class="data.icon" class="node-icon"></i>
                <span>{{ node.label }}</span>
                <span v-if="data.type === 'department'" class="employee-count">({{ data.employeeCount }}人)</span>
              </span>
            </template>
          </el-tree>
        </el-card>
      </el-col>

      <el-col :span="16">
        <el-card v-if="currentNode">
          <div class="department-header">
            <h3>{{ currentNode.label }} - 成员列表</h3>
            <div>
              <el-button type="primary" icon="el-icon-plus" @click="showAddEmployeeDialog">添加员工</el-button>
              <el-button icon="el-icon-download" @click="exportDepartmentData">导出数据</el-button>
            </div>
          </div>

          <el-table :data="employeeList" style="width: 100%" height="600">
            <el-table-column prop="name" label="姓名" width="120">
              <template #default="scope">
                <div class="employee-info">
                  <el-avatar :size="40" :src="scope.row.avatar" />
                  <span style="margin-left: 10px;">{{ scope.row.name }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="employeeId" label="员工编号" width="150" />
            <el-table-column prop="position" label="职位" width="180" />
            <el-table-column prop="phone" label="手机号" width="150" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column prop="entryDate" label="入职日期" width="120" />
            <el-table-column label="操作" width="120">
              <template #default="scope">
                <el-button type="text" @click="viewEmployee(scope.row)">查看</el-button>
                <el-button type="text" @click="transferEmployee(scope.row)">调动</el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination">
            <el-pagination
                v-model:current-page="currentPage"
                :page-size="pageSize"
                layout="total, prev, pager, next"
                :total="totalEmployees"
                @current-change="handlePageChange"
            />
          </div>
        </el-card>

        <el-card v-else class="placeholder-card">
          <el-empty description="请从左侧选择部门查看成员信息" />
        </el-card>
      </el-col>
    </el-row>

    <!-- 添加部门对话框 -->
    <el-dialog v-model="addDepartmentDialogVisible" title="添加新部门">
      <el-form :model="newDepartmentForm" label-width="80px">
        <el-form-item label="部门名称" required>
          <el-input v-model="newDepartmentForm.name" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="上级部门">
          <el-cascader
              v-model="newDepartmentForm.parentId"
              :options="departmentOptions"
              :props="{ checkStrictly: true, value: 'id', label: 'label', children: 'children' }"
              clearable
              placeholder="选择上级部门"
          />
        </el-form-item>
        <el-form-item label="部门主管">
          <el-select v-model="newDepartmentForm.manager" placeholder="选择部门主管">
            <el-option
                v-for="employee in managerCandidates"
                :key="employee.id"
                :label="employee.name"
                :value="employee.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门描述">
          <el-input v-model="newDepartmentForm.description" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addDepartmentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addDepartment">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'

export default {
  name: 'Organization',
  setup() {
    const filterText = ref('')
    const orgTree = ref(null)
    const currentNode = ref(null)
    const addDepartmentDialogVisible = ref(false)

    const orgTreeData = ref([
      {
        id: 1,
        label: '总公司',
        type: 'company',
        icon: 'el-icon-office-building',
        children: [
          {
            id: 2,
            label: '技术部',
            type: 'department',
            icon: 'el-icon-cpu',
            employeeCount: 120,
            children: [
              {
                id: 5,
                label: '前端组',
                type: 'department',
                icon: 'el-icon-monitor',
                employeeCount: 25
              },
              {
                id: 6,
                label: '后端组',
                type: 'department',
                icon: 'el-icon-data-line',
                employeeCount: 35
              },
              {
                id: 7,
                label: '测试组',
                type: 'department',
                icon: 'el-icon-check',
                employeeCount: 20
              }
            ]
          },
          {
            id: 3,
            label: '市场部',
            type: 'department',
            icon: 'el-icon-data-analysis',
            employeeCount: 45,
            children: [
              {
                id: 8,
                label: '销售组',
                type: 'department',
                icon: 'el-icon-shopping-bag-1',
                employeeCount: 25
              },
              {
                id: 9,
                label: '策划组',
                type: 'department',
                icon: 'el-icon-edit',
                employeeCount: 20
              }
            ]
          },
          {
            id: 4,
            label: '人力资源部',
            type: 'department',
            icon: 'el-icon-user',
            employeeCount: 15
          }
        ]
      }
    ])

    const defaultProps = {
      children: 'children',
      label: 'label'
    }

    const employeeList = ref([
      {
        id: 1001,
        name: '张三',
        employeeId: 'EMP10001',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        position: '高级前端开发工程师',
        phone: '13800138000',
        email: 'zhangsan@company.com',
        entryDate: '2020-03-12'
      },
      {
        id: 1002,
        name: '李四',
        employeeId: 'EMP10002',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        position: '前端开发工程师',
        phone: '13900139000',
        email: 'lisi@company.com',
        entryDate: '2021-05-18'
      },
      { id: 1009,
        name: '郑十一',
        employeeId: 'EMP10009',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        position: '测试工程师',
        phone: '13100131000',
        email: 'zhengshiyi@company.com',
        entryDate: '2022-05-18',
        department: 7
      },
      {
        id: 1010,
        name: '王十二',
        employeeId: 'EMP10010',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        position: '自动化测试',
        phone: '13000130000',
        email: 'wangshier@company.com',
        entryDate: '2022-08-22',
        department: 7
      },
      {
        id: 1011,
        name: '冯十三',
        employeeId: 'EMP10011',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        position: '销售经理',
        phone: '15900159000',
        email: 'fengshisan@company.com',
        entryDate: '2021-11-05',
        department: 8
      },
      {
        id: 1012,
        name: '陈十四',
        employeeId: 'EMP10012',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        position: '客户经理',
        phone: '15800158000',
        email: 'chenshisi@company.com',
        entryDate: '2022-01-15',
        department: 8
      },
      {
        id: 1013,
        name: '褚十五',
        employeeId: 'EMP10013',
        avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
        position: '财务主管',
        phone: '15700157000',
        email: 'chushiwu@company.com',
        entryDate: '2020-09-10',
        department: 9
      },
      {
        id: 1014,
        name: '卫十六',
        employeeId: 'EMP10014',
        avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
        position: '会计',
        phone: '15600156000',
        email: 'weishiliu@company.com',
        entryDate: '2021-04-25',
        department: 9
      }
      // 更多员工数据...
    ])

    const currentPage = ref(1)
    const pageSize = ref(10)
    const totalEmployees = ref(25)

    const newDepartmentForm = reactive({
      name: '',
      parentId: [],
      manager: '',
      description: ''
    })

    const departmentOptions = ref([])
    const managerCandidates = ref([])

    const filterNode = (value, data) => {
      if (!value) return true
      return data.label.indexOf(value) !== -1
    }

    const handleNodeClick = (data) => {
      if (data.type === 'department') {
        currentNode.value = data
        // 实际项目中这里会加载部门成员数据
      }
    }

    const showAddDepartmentDialog = () => {
      // 实际项目中这里会加载部门选项和主管候选人
      departmentOptions.value = [
        { id: 1, label: '总公司', children: [
            { id: 2, label: '技术部' },
            { id: 3, label: '市场部' },
            { id: 4, label: '人力资源部' }
          ]}
      ]

      managerCandidates.value = [
        { id: 1001, name: '张三' },
        { id: 1002, name: '李四' },
        { id: 1003, name: '王五' }
      ]

      addDepartmentDialogVisible.value = true
    }

    const addDepartment = () => {
      ElMessage.success('部门添加成功')
      addDepartmentDialogVisible.value = false
      // 重置表单
      Object.assign(newDepartmentForm, {
        name: '',
        parentId: [],
        manager: '',
        description: ''
      })
    }

    const showAddEmployeeDialog = () => {
      ElMessage.info('添加员工功能')
    }

    const exportDepartmentData = () => {
      ElMessage.success('部门数据导出成功')
    }

    const viewEmployee = (employee) => {
      ElMessage.info(`查看员工: ${employee.name}`)
    }

    const transferEmployee = (employee) => {
      ElMessage.info(`调动员工: ${employee.name}`)
    }

    const handlePageChange = (page) => {
      currentPage.value = page
      // 实际项目中根据页码加载数据
    }

    const loadOrganization = () => {
      ElMessage.success('组织数据已刷新')
    }

    watch(filterText, (val) => {
      orgTree.value.filter(val)
    })

    onMounted(() => {
      // 初始化加载数据
    })

    return {
      filterText,
      orgTree,
      currentNode,
      orgTreeData,
      defaultProps,
      employeeList,
      currentPage,
      pageSize,
      totalEmployees,
      addDepartmentDialogVisible,
      newDepartmentForm,
      departmentOptions,
      managerCandidates,
      filterNode,
      handleNodeClick,
      showAddDepartmentDialog,
      addDepartment,
      showAddEmployeeDialog,
      exportDepartmentData,
      viewEmployee,
      transferEmployee,
      handlePageChange,
      loadOrganization
    }
  }
}
</script>

<style scoped>
.organization-container {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.org-content {
  margin-top: 20px;
}

.tree-card {
  height: calc(100vh - 200px);
  overflow: auto;
}

.tree-header {
  margin-bottom: 15px;
}

.custom-node {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding: 5px 0;
}

.node-icon {
  margin-right: 8px;
  font-size: 16px;
}

.employee-count {
  margin-left: 5px;
  color: #999;
  font-size: 12px;
}

.department-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.employee-info {
  display: flex;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.placeholder-card {
  height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>